<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例7</title>
    <script src="jquery.js"></script>
    <script>
        $(function (){
            $("#submitBtn").click(function (){
                const email = document.getElementById("email");
                console.log(email.validity)
                if(email.validity.valueMissing){
                    email.setCustomValidity('邮箱不能为空')
                }else if(email.validity.patternMismatch){
                    email.setCustomValidity('邮箱格式不正确')
                }else{
                    email.setCustomValidity('')
                }

                const password = document.getElementById("password")
                if(password.validity.valueMissing){
                    password.setCustomValidity('密码不能为空')
                }else if(password.validity.patternMismatch){
                    password.setCustomValidity('密码格式不正确')
                }else{
                    password.setCustomValidity('')
                }
            })
        })
    </script>
</head>
<body>
    <h1>示例6</h1>
    <form id="myform" action="success.html">
        <p>
            <input id="email"
                   required
                   pattern="\w+@\w+(\.[a-zA-Z]{2,3}){1,2}"
                   placeholder="请输入邮箱"/>
        </p>
        <p>
            <input id="password"
                   required
                   pattern="\w{8,}"
                   placeholder="请输入密码"/>
        </p>
        <p>
            <button type="submit" id="submitBtn">登录</button>
            <button type="reset">重置</button>
        </p>
    </form>
</body>
</html>